<template>
  <Headerbar />

  <div class="expert" style="min-height: 625px; height: 100vh">
    <!-- 专家grid -->
    <div class="middle" v-if="hasResult">
      <n-grid cols="1 s:2 m:4" responsive="screen" :x-gap="12" :y-gap="8">
        <n-grid-item v-for="item in expertList">
          <ExpertCard :expert="item" style="margin: 0 auto"></ExpertCard>
        </n-grid-item>
      </n-grid>
    </div>
    <div class="bottom">
      <n-pagination
        v-if="hasResult && expertList.length > 0"
        class="pagination"
        v-model:page="searchParams.pageNum"
        :page-count="Math.ceil(expertCount / searchParams.pageSize)"
        @update:page="updatePage"
        show-quick-jumper
      />
      <n-empty v-else size="large" description="暂无相关科研人员" />
    </div>
  </div>
</template>

<script setup>
//左侧栏类型
import { ref, reactive } from 'vue'

import api from '@/api/api'
import ExpertCard from './components/ExpertCard.vue'
import { useRoute } from 'vue-router'
const message = useMessage()
onMounted(() => {
  if (searchParams.content) {
    searchExpert()
  }
})

const { Expert } = api
const route = reactive(useRoute())

const searchParams = reactive({
  key: route.query.key || 'name',
  content: route.query.content,
  pageNum: 1,
  pageSize: 12
})

watch(
  () => route.query.content,
  () => {
    searchParams.key = route.query.key || 'name'
    searchParams.content = route.query.content
    searchExpert()
  }
)
const prevSearchParams = reactive({
  key: route.query.key || 'name',
  content: route.query.content
})

const hasResult = ref(false)

const expertList = ref([])
const expertCount = ref(0)

const searchExpert = () => {
  Expert.search({ ...searchParams, pageNum: 1 }).then((res) => {
    if (res.success) {
      prevSearchParams.key = searchParams.key
      prevSearchParams.content = searchParams.content
      hasResult.value = true
      expertList.value = res?.data?.list
      expertCount.value = res?.data?.count
      searchParams.pageNum = 1
      if (expertList.value.length === 0) {
        message.info('暂无相关科研人员')
      }
    }
  })
}

const updatePage = () => {
  Expert.search({ ...searchParams, ...prevSearchParams }).then((res) => {
    if (res.success) {
      hasResult.value = true
      expertList.value = res?.data?.list
      expertCount.value = res?.data?.count
    }
  })
}
const backgroundImg = computed(() => {
  return "url('../../../public/bg_white.png')"
})
</script>

<style scoped lang="scss">
:deep(.n-input-group-label) {
  background-color: 'rgba(250,250,250,0.6)' !important;
}
.expert {
  background-image: v-bind(backgroundImg);
  background-size: auto;
  background-repeat: repeat;
  background-position: center;
  padding: 10px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .expert {
    padding: 0 10px !important;
  }
  .top {
    width: 100vw !important;
  }
}
.title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  text-indent: 2px;
  padding-bottom: 1vh;
}
.top {
  margin: 5px 0 12px;
  width: 40vw;
  min-width: 300px;
  height: 46px;
  // border: 1px solid rgb(200, 200, 200);
  display: flex;
  align-items: center;
  .prefix {
    padding: 0 1vw;
    border: 1px solid rgb(230, 230, 230);
    font-size: 16px;
    color: rgb(120, 120, 120);
    border-width: 0 1px 0 0;
    .span {
      color: red;
    }
  }
  .input {
    margin: 0 1vw;
    width: 32%;
    input {
      border: none;
      outline: none;
      background-color: rgba(1, 1, 1, 0);
      width: 100%;
    }
  }
  .icon {
    display: flex;
    justify-content: center;
    cursor: pointer;
  }
}
.middle {
  width: 100%;
  margin-top: 2vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .expert-card {
    margin: 12px 0;
  }
}
.bottom {
  margin: 30px 0;
}
</style>
